<template>
  <tm-form
    :model-value="formData"
    layout="horizontal"
    :margin="[0]"
    :padding="[0, 0]"
    :border="false"
    :label-align="'left'"
    :transparent="true"
    @submit="handleSubmit"
  >
    <Card title="身份信息" :title-font-size="'36rpx'" :padding="[32]" :show-divider="false">
      <view class="hb-flex hb-flex-col hb-gap-3 hb-mt-6">
        <tm-form-item
          required
          label="证件类型"
          field="personalIdType"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
        >
          <text class="hb-text-sm hb-text-gray-500">中国大陆居民身份证</text>
        </tm-form-item>

        <tm-form-item
          required
          label=""
          field="personalIdFrontImage"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :rules="[
            {
              required: true,
              message: '请上传身份证正面照片',
            },
            {
              required: true,
              message: '请上传身份证正面照片',
              validator: () => {
                if (!formData.personalIdFrontImage) {
                  return false;
                }
                return true;
              },
            },
            {
              required: true,
              message: '请上传身份证反面照片',
              validator: () => {
                if (!formData.personalIdBackImage) {
                  return false;
                }
                return true;
              },
            },
          ]"
        >
          <view class="hb-text-sm hb-mb-3">上传身份证照片</view>
          <view class="hb-flex hb-gap-3">
            <CredentialUpload
              v-model:img="formData.personalIdFrontImage"
              :bg-img-key="'frontOfIDCard'"
            />
            <CredentialUpload
              v-model:img="formData.personalIdBackImage"
              :bg-img-key="'reverseOfIDCard'"
            />
          </view>
        </tm-form-item>

        <tm-form-item
          label="真实姓名"
          field="personalName"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :border="true"
          required
          :rules="[
            {
              required: true,
              message: '请输入真实姓名',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.personalName"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入真实姓名"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="证件号码"
          field="personalIdNumber"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          required
          :rules="[
            {
              required: true,
              message: '请输入证件号码',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.personalIdNumber"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入证件号码"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          required
          label="证件有效期"
          field="personalIdStart"
          :border="true"
          :margin="[0, 0]"
          :padding="[0]"
          align="top"
          :rules="[
            {
              required: true,
              message: '请选择证件有效期',
              validator: () => {
                if (!formData.personalIdStart) {
                  return false;
                }
                return true;
              },
            },
            {
              required: true,
              message: '请选择证件有效期结束时间',
              validator: () => {
                if (!formData.personalIdEnd) {
                  return false;
                }
                return true;
              },
            },
          ]"
        >
          <EffectiveTime v-model:time="time" />
        </tm-form-item>
      </view>
    </Card>
    <BottomSubmit submit-btn-label="提交认证信息" :submitLoading="loading" />
  </tm-form>
</template>

<script lang="ts" setup>
  import { PersonalRealNameAuth } from '@/api/realNameAuth/type';
  import CredentialUpload from './CredentialUpload.vue';
  import EffectiveTime from './EffectiveTime.vue';
  import { botCertificationCertify } from '@/api/realNameAuth';
  import { AuthTypeEnum, IdCardTypeEnum } from '@/enums/LoginEnum';
  import Card from './Card/index.vue';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();

  const props = defineProps<{
    personalRealNameAuth: PersonalRealNameAuth;
  }>();
  const formData = reactive<PersonalRealNameAuth>({} as PersonalRealNameAuth);

  watch(
    () => props.personalRealNameAuth,
    (value) => {
      formData.personalIdType = IdCardTypeEnum.ID_CARD;
      formData.personalIdFrontImage = value?.personalIdFrontImage;
      formData.personalIdBackImage = value?.personalIdBackImage;
      formData.personalName = value?.personalName;
      formData.personalIdNumber = value?.personalIdNumber;
      formData.personalIdStart = value?.personalIdStart;
      formData.personalIdEnd = value?.personalIdEnd;
      formData.certificationType = AuthTypeEnum.PERSONAL;
      formData.personalIdStart = value?.personalIdStart;
      formData.personalIdEnd = value?.personalIdEnd;
    },
    { deep: true, immediate: true },
  );

  const time = computed({
    get() {
      return [formData.personalIdStart, formData.personalIdEnd];
    },
    set(value: string[]) {
      formData.personalIdStart = value[0];
      formData.personalIdEnd = value[1];
    },
  });

  const loading = ref(false);
  // 提交申请
  const handleSubmit = async (e: Tmui.tmFormSubmitResult<typeof formData>) => {
    console.log(e);

    // 表单验证
    if (!e.isPass) return;
    // 防止重复提交
    if (loading.value) return;
    loading.value = true;
    // 使用表单验证
    try {
      await botCertificationCertify(formData);

      uni.showToast({
        title: '提交认证信息成功',
        icon: 'success',
      });
      userStore.getUserInfo();
      setTimeout(() => {
        redirectTo({
          name: 'realNameAuthResult',
        });
      }, 1000);
    } catch (e) {
      console.error('表单验证失败', e);
    } finally {
      loading.value = false;
    }
  };
</script>

<style lang="scss" scoped></style>
